<!DOCTYPE html>
<html>
<head>
    <title>Book Manager</title>
    <link rel="stylesheet" href="lib/jquery.mobile-1.3.1.css">
    <link rel="stylesheet" href="css/mainPage.css">

    <script src="../lib/prototype.js"></script>
    <script src="../lib/jquery-1.9.1.js"></script>
    <script>
        var $j = jQuery.noConflict();
    </script>
    <script src="lib/jquery.mobile-1.3.1.js"></script>

    <script src="classes/Static.js"></script>
    <script src="classes/Global.js"></script>
    <script src="classes/Collections.js"></script>


</head>
<body>

<div data-role="page" id="mainPage">
    <div data-role="header" data-id="header1" data-position="fixed">
        <a data-icon="refresh" class="ui-btn-left" id="refreshButton">Refresh</a>
        <h1>Book Collection Manager</h1>
    </div>

    <div data-role="content">
        <ul id="ib-collections-list" data-role="listview" data-filter="true" data-filter-placeholder="Search collections..." data-inset="true" data-split-icon="delete">

        </ul>
    </div>


    <div data-role="popup" id="deleteConfirm" data-dismissible="false" data-position-to="window"
            data-overlay-theme="a" style="width: 300px">
        <div data-role="header" style="overflow: visible">
            <h1>Delete Book ?</h1>
        </div>

        <div data-role="content">
            <h3 class="ui-title">Are you sure to delete this book ?</h3>
            <p>This action cannot be undone</p>
            <a href="#mainPage" data-role="button" data-rel="back" data-inline="no" class="yes">Yes</a>
            <a href="#mainPage" data-role="button" data-rel="back" data-inline="no" class="no">No</a>
        </div>
    </div>
</div>



<script src="init.js"></script>
</body>
</html>